var goodlist = [
    { id: 1, name: '高级办公椅', price: 10000, address: './imgs/01.gif' },
    { id: 2, name: '高级按摩椅', price: 1000, address: './imgs/02.gif' },
    { id: 3, name: '高级电动按摩椅', price: 100, address: './imgs/03.gif' },
    { id: 4, name: '电动按摩椅', price: 10, address: './imgs/04.gif' },
    { id: 5, name: '老板椅', price: 20000, address: './imgs/05.gif' },
    { id: 6, name: '办公桌', price: 50000, address: './imgs/06.gif' },
    { id: 7, name: '可升降办公椅', price: 2000, address: './imgs/07.gif' },
    { id: 8, name: '可升降办公桌', price: 5000, address: './imgs/08.gif' },
]


var oo = { list: [] }

function render() {
    var list = document.querySelector('.left');
    list.innerHTML = goodlist.map((item) => {
        return ` <figure class="good">
        <img src="${item.address}" alt="">
        <figcaption class="name">${item.name}</figcaption>
        <figcaption>${item.price}</figcaption>
        <button>加入购物车</button>
    </figure> `
    }).join('')
}
function renderGouwuche() {
    var goods = document.querySelector('.goods');

    goods.innerHTML = oo.list.map((item) => {
        return `<div class="good">
        <img src="${item.address}" alt="">
                    <span class="name">${item.name}</span>
                    <span>${item.price}</span>
                    <button class="plus">+</button>
                    <span class="num">1</span>
                    <button class="reduce">-</button>  
                    <button class="favorite">删除收藏</button>  
                                   
                </div>`
    }).join('')
    //------------------------------------- 点击按钮加减 -------------------------------------------------
    var num = document.querySelector('.num')
    var plus = document.querySelector('.plus')
    var reduce = document.querySelector('.reduce')
    var count = 1
    plus.onclick = () => {
        num.innerHTML = `${count++}`
    }
    reduce.onclick = () => {
        if (count >= 1) {
            num.innerHTML = `${count--}`

        }
    }



    //------------------------------ 删除收藏 ---------------------------------------------
    var favorite = document.querySelector('favorite')
    favorite.onclick = () => {

    }
}





render();


//给list绑定点击事件
var list = document.querySelector('.left');
list.onclick = function (e) {
    if (e.target.tagName == 'BUTTON') {
        //获取点击商品的下标
        var btns = [...document.querySelectorAll('button')]
        var index = btns.findIndex((item) => {
            return item == e.target;

        })
        //------------------------------ 不呈现重复的商品 (数量还没改变)-------------------------------------------------------------------
        var num = document.querySelector('.num')
        var zongshu = document.querySelector('h3>span')
        var count = 0
        if (oo.list.indexOf(goodlist[index]) == -1) {
            //添加商品数据到 购物车数组
            oo.list.push(goodlist[index])
        }
        else {
            num.innerHTML = `${count++}`
            zongshu.innerHTML = num.innerHTML
        };

        renderGouwuche();
    }
}

var ooo = new Proxy(oo, {
    set: (a, b, c, d) => {
        console.log('set');
        renderGouwuche();
    },
    get: (a, b, c, d) => { console.log('获取了oo对象', a, b, c, d) }
})
